<template>
    <div class="wrapper main_wrap" ref="main">
        <page_header :content="content"></page_header>

        <el-card class="result_card" ref="result_card">

            <div class="result_search" ref="result_search">
                <div class="result_search_item flexbettwen">
                    <el-input size="medium" v-model="search.keyword"
                              placeholder="请输入关键字搜索" clearable @clear="select_page()"></el-input>
                    <el-button plain type="primary" icon="el-icon-search" size="medium" @click="select_page"
                               style="padding-right: 10px;padding-left: 10px;margin-left: 20px">
                        搜索
                    </el-button>
                </div>
            </div>

            <div class="result_list">

                <div class="result_ul" :style="'height:' + this.list_height + 'px'" v-if="data_length > 0">

                    <ul style="overflow-y: auto">

                        <li class="result_li" v-for="(item,index) in table_list" :key="index">
                            <div class="status_view_wrapper">
                                <img v-if="to_state(item) == 0"
                                     src="../../assets/images/putin.png" style="width: 60px;">
                                <img v-else-if="to_state(item) == 1"
                                     src="../../assets/images/putin.png" style="width: 60px;">
                                <img v-else-if="to_state(item) == 2"
                                     src="../../assets/images/end.png" style="width: 60px;">
                            </div>
                            <div class="result_li_name_time">
                                <p class="result_li_name">
                                    <span class="dot_span"></span>
                                    <span class="result_li_name_text">{{item.name}}</span>
                                </p>
                                <p class="result_li_time">
                                    <span class="time_span">{{to_date(item.stime, item.etime)}}</span>
                                </p>
                            </div>
                            <div class="activity_main_wrap">
                                <div class="left_img">
                                    <img :src="item.share" alt="分享图">
                                </div>
                                <div class="right_info">
                                    <p class="theme">
                                        {{item.theme}}</p>
                                    <p class="describe">
                                        {{item.describe}}</p>
<!--                                    <p class="invite_code">-->
<!--                                        {{item.tel}}</p>-->
                                </div>
                            </div>
                            <div class="activity_oprate">
                                <div class="oprate_address">{{item.address}}</div>
                                <el-dropdown  @command="handleCommand" :hide-on-click="false">
                                    <span class="el-dropdown-link">操作
                                        <i class="el-icon-arrow-down el-icon--right"></i>
                                    </span>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item :command="{item:item, tag: '链接'}">链接</el-dropdown-item>
                                        <el-dropdown-item :command="{item:item, tag: '申请'}">申请</el-dropdown-item>
                                        <el-dropdown-item :command="{item:item, tag: '详情'}">详情</el-dropdown-item>
                                        <el-dropdown-item :command="{item:item, tag: '结束'}">结束</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </div>
                        </li>
                    </ul>

                </div>

                <div class="clue_empty" v-else>
                    <el-empty :image-size="100"></el-empty>
                </div>
            </div>

        </el-card>

        <el-dialog
            title=""
            v-if="is_dialog"
            :visible.sync="is_dialog"
            :close-on-click-modal="false"
            center
            width="70%"
        >
            <div class="qrcode_content">
                <p class="p_center">员工注册码</p>
                <img :src="qrcode_text" alt="" style="width: 200px;height: 200px">
                <p class="p_center p_tip">请长按保存图片</p>
            </div>

        </el-dialog>

    </div>
</template>

<script>
    import page_header from "../../components/page_header";
    import _router from "../../common/_router";
    import _time from "../../utils/_time";
    import api_activity from "../../api/api_activity";
    import _url from "../../utils/_url";
    import cache_user from "../../cache/cache_user";
    import _calc_height from "../../common/_calc_height";
    import _confirm from "../../common/_confirm";

    export default {
        components: {
            page_header,
        },
        data() {

            return {

                content: '活动管理',
                //分页
                data_length: 1, // 总条数
                table_list: [],
                current_page: 0, //当前页
                disabled: true,
                list_height: 0,

                search: {
                    keyword: ''
                }, //检索
                is_dialog: false,
                address: '',
                qrcode_text: '',

            }
        },
        created() {
            this.select_page()
        },
        mounted() {
            this.calc_height()
        },
        methods: {
            // 剩余高度
            calc_height() {
                const card_height = this.$refs.main.clientHeight
                const search_height = this.$refs.result_search.offsetHeight
                _calc_height.load(card_height, search_height,50, this)
            },

            to_state(activity) {
                // 已结束 2  转换中 1 进行中 0
                if(activity.state==0) {
                    return 2
                }
                //已结束
                if(_time._current() > activity.etime) {
                    return 2
                }
                // 转换中
                if(_time._current() > activity.stime) {
                    return  1
                }
                // 进行中
                return  0
            },
            to_date(stime,etime) {
               return  _time._to_month_date(stime,etime)
            },
            //查询
            select_page() {
                let that = this;
                api_activity.list(this.search, function (data) {
                    that.table_list = data
                })
            },
            handleCommand(command) {
                const {item, tag} = command;
                if(tag == '详情') {
                    _router.jmp_url('/manage/activity_info?id=' + item.id)
                } else if(tag == '结束') {
                    this.clk_end(item)
                } else if(tag == '申请') {
                    this.is_dialog = true
                    this.address = item.address
                    this.qrcode_text = item.saler_qrcode
                    if(!item.saler_qrcode) {
                        let that = this
                        api_activity.qrcode(item.id,function (data) {
                            that.qrcode_text = data;
                            item.saler_qrcode = data
                        })
                    }
                } else if(tag == '链接') {
                    _router.jmp_url('/page/common?id=' + item.id)
                }
            },

            clk_end(item) {
                let id = item.id;
                let that = this;
                _confirm.query(that,'是否结束该活动?', '提示',function () {
                    api_activity.end(id, function (data) {
                        that.select_page()
                    })
                })
            }
        }
    }
</script>

<style scoped lang="less">
    @import "../../assets/style/manage/order";
    .p_center{
        text-align: center;
        font-size: 16px;
        font-weight: bold
    }
    .p_tip{
        color: #666666;
        font-weight: normal;
    }
</style>
